<template>
  <div class="h-[100vh]">
    <div class="flex">
      <div class="w-[60%] h-[100vh]">
        <img class="h-[100vh] object-cover" :src="img" alt="" />
      </div>
      <div class="flex m-auto items-center">
        <a-card :style="{ width: '460px' }" title="登录">
          <a-form
            :model="form"
            :style="{ width: '400px' }"
            layout="vertical"
            @submit="handleSubmit"
          >
            <a-form-item
              field="userName"
              label="账号"
              :rules="[{ required: true, message: '输入账号' }]"
            >
              <a-input v-model="form.userName" placeholder="输入账号" />
            </a-form-item>
            <a-form-item
              field="password"
              label="密码"
              :rules="[{ required: true, message: '输入密码' }]"
            >
              <a-input-password
                password
                v-model="form.password"
                placeholder="输入密码"
              />
            </a-form-item>
            <a-form-item field="isRead">
              <a-checkbox v-model="form.isRead"> 记住密码 </a-checkbox>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" long html-type="submit">登录</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import img from "@/assets/images/school1.jpg";
import { reactive } from "vue";
import { useRouter } from "vue-router";

const form = reactive({
  userName: "",
  password: "",
});

const router = useRouter();

const handleSubmit = ({ values, error }) => {
  if (values.userName === "admin" && values.password === "admin123.") {
    window.localStorage.setItem("login", "1");
    router.push("/admin");
  }
};
</script>

<style lang="scss" scoped></style>
